{{useCss "app-pages/css/goods_details.scss"}}
<div class="goods_details">
    {{#> "goodsimgview"}}
    <div class="goodsinfo">
        <div class="titlebar">
            {{goods_detail.goods_name}}
            <div class="cb-main">
                <href to="/main.html">访问主页</href>
            </div>
        </div>
        <div class="infobox">
            <div class="intro">
                {{goods_detail.intro||"暂无商品描述"}}
            </div>
        </div>
        <div class="detail">
            <div class="item">
                <div class="td">
                    现价：<span class="price">￥{{#Fixed goods_detail.cash}}</span>
                </div>
                <div class="td">
                    原价：<span class="price-old">￥{{goods_detail.original_price||goods_detail.price}}</span>
                </div>
            </div>
            <div class="item">
                <div class="td">库存：{{#if goods_detail.num==0}}缺货{{#else}}{{goods_detail.num}}{{/if}}</div>
                <div class="td">人气：{{$Cache.goods_details.hot_num}}</div>
            </div>
            <div class="goods-attr">
                服务承诺：
                <a class="icon-emo-happy">品质保证</a>
                <a class="icon-truck">安全运输</a>
                <a class="freight">运费：{{#Fixed goods_detail.express_price||0}}</a>
            </div>
        </div>

        <div class="methodbox">
            <div class="item_left">
                <div class="item">
                    数量：<input type="number" bind-input="{{'$Cache.goods_details.buy_number'}}" bind-value="{{$Cache.goods_details.buy_number||1}}" />
                </div>
                <div class="item">
                    {{#if goods_detail.num }}
                        <button event-click="{{'$Event.goods_details.goods.add_to_cart'}}">立即购买</button>
                    {{#else}}
                        <button>暂时缺货</button>
                    {{/if}}
                </div>
                <div class="item">
                    <a class="booking">
                        在线预约
                        <div class="arrow-down"></div>
                        <div class="wechat_info">
                            <div class="title">添加微信公众号</div>
                            <div class="title">获取微信客服，在线预约你的精品</div>
                            <div class="wechat_id">微信公众号</div>
                            <div class="wechat_id">
                                <label>{{$Cache.goods_details.wechat_data.wechat_id}}</label>
                            </div>
                            <div class="title">微信二维码</div>
                            <div class="wechat_service_img">
                                <img bind-src="{{$Cache.goods_details.wechat_data.wechat_service_img}}?imageView/1/w/350" />
                            </div>
                        </div>
                    </a>
                </div>
                <div class="item">
                    {{#if $Cache.goods_details.is_collect}}
                    <a event-click="{{'$Event.goods_details.goods.collect_toggle'}}" class="icon-heart" title="点击取消收藏">已收藏</a>
                    {{#else}}
                    <a event-click="{{'$Event.goods_details.goods.collect_toggle'}}" class="icon-heart-empty" title="点击收藏">收藏</a>
                    {{/if}}
                </div>
            </div>
            <div class="item_right">
                <div class="share">
                    <p>分享商品二维码给更多朋友</p>
                    <img bind-src="{{$Cache.goods_details.qrcode_data}}">
                    <jqrcode
                        text="{{bus_info.info.domain_url}}/goods_details.html?id={{goods_detail._id}}"
                        ec-level="H"
                        size="150"
                        radius="20"
                        bind-input="{{'$Cache.goods_details.qrcode_data'}}"
                        style="display:none"
                    ></jqrcode>
                </div>
            </div>
        </div>
    </div>
    <div class="other">
        <div class="tool_bar">
            <div class="item {{($Cache.goods_details.other==2)||'focus'}}" event-click="{{'$Event.goods_details.set_other_contents'}}">
                商品详情
            </div>
            <div class="item {{($Cache.goods_details.other==2)&&'focus'}}" event-click="{{'$Event.goods_details.set_other_comments'}}">
                累计评价
            </div>
        </div>
        <div class="content {{($Cache.goods_details.other==2)||'focus'}}">
            {{#if goods_detail.detail_content}}
            {{HTML goods_detail.detail_content}}
            {{#else}}
            <p>暂无商品详情</p>
            {{/if}}
        </div>

        <div class="comments_box {{($Cache.goods_details.other==2)&&'focus'}}">
            {{#if goods_detail.evaluations.length}}
                {{#each goods_detail.evaluations}}
                <div class="comment">
                    <div class="comment_title">
                        <div class="item">{{comment.commenter_info.name||"匿名"}}</div>
                        <div class="time">{{#Time comment.create_time,"YYYY-MM-DD hh:mm:ss"}}</div>
                    </div>
                    <div class="comment_detail">
                        <div class="main_comment">
                            {{star_num}}星：{{comment.content}}
                        </div>
                        {{#if comment.comments.length}}
                        <div class="comment_child_box">
                            {{#each comment.comments}}
                            <div class="comment_child">
                                <div class="comment_child_title">
                                    <div class="item {{type=='bus'&&'focus'}}">{{commenter_info.name}}</div>
                                    <div class="time">{{#Time create_time,"YYYY-MM-DD hh:mm:ss"}}</div>                    
                                </div>
                                <div class="comment_child_text">
                                    {{content}}
                                </div>
                            </div>
                            {{/each}}
                        </div>
                        {{/if}}
                    </div>
                </div>
                {{/each}}
            {{#else}}
            <p>暂无商品评论</p>
            {{/if}}
        </div>
    </div>
</div>

<xmp type="template" name="goodsimgview">
    <div class="goodsimg">
        <div class="bigbox">
            <div class="movebox">
                {{#each goods_detail.detail_img_urls}}
                <img class="bigimg" bind-src="{{$This}}?imageView/1/w/500/h/500/q/99" />
                {{/each}} 
            </div>
        </div>
        <div class="smallbox">
            {{#if goods_detail.detail_img_urls.length}} {{#each goods_detail.detail_img_urls }}
            <div class="smallitem">
            <img name="{{$Index}}" class="smallimg" bind-src="{{$This}}?imageView/1/h/50/w/50" />
            </div>
            {{/each}} {{#else}}此商品卖家没有上传图片{{/if}}
            
        </div>
    </div>
    <script type="text/vm">
        function(vm) {
            var movebox = vm.queryElement({
                className: "movebox"
            })[0];
            var smallbox = vm.queryElement({
                className: "smallbox"
            })[0];
            
            var $movebox = $(movebox);
            var $smallbox = $(smallbox);
            $smallbox.on("click", "img", function() {
                var w = $movebox.width();
                var $this=$(this);
                var _w=$this.width();
                var _h=$this.height();
                $movebox.stop().animate({
                    marginLeft: -w * $this.attr('name')
                }, 150);
            });
        }
    </script>
</xmp>